<html xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity4">
<head>
    <!--<meta content="text/html;charset=UTF-8"/>-->
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
</head>
<head th:include="include/include"></head>
<script>
</script>
<style type="text/css">
    a,a:hover,a:focus{
        color: #ffffff;
        text-decoration: none;
    }
    .panel-group {
        background-color: #c7ddef;
        width:100%;
        /*height: 700px;*/
        overflow-y: auto;

    }
    .panel-group .panel {
        background-color: #c7ddef;
        border: none;
    }

    .panel-heading{
        border-top-left-radius: 0px;
        border-top-right-radius: 0px;
    }
    .panel-default>.panel-heading {
        border: none;
        color: #ffffff;
        background-color: #4a8bc2;
        width: auto;
    }
    .panel-default>.panel-heading>span{
        font-size: 10px;
    }
    .panel-default>.panel-heading:active,.panel-default>.panel-heading:hover{
        background-color: #d58512;
    }
    .panel-default>.panel-heading>a:hover{
        text-decoration: none;
        background-color: #d58512;
    }
    .panel-group .panel-heading+.panel-collapse>.panel-body {
        border: none;
    }
    .panel-body {
        padding: 0px;
    }
    .nav>li{
        padding: 1px 0px 0px 0px;
    }
    .panel-body .nav>li>a{
        text-decoration: none;
        padding: 10px 10px 10px 30px;
    }
    .nav>li>a:hover,.nav>li>a:focus{
        background-color: #9acfea;
    }
    .main_right ul li a{
        background-color: #e0e0e0;
    }
    .main_right ul li{
        color: #000;
        background-color:white;
    }

    .middle {

        float: none;

        display: inline-block;

        vertical-align: middle;
    }

</style>
</head>

<body>
    <div class="container-fluid">
        <!--顶部-->
        <div class="row"  id="topPart">
                <div class="col-md-12 col-lg-12 col-xs-12 col-sm-12 ">

                    <nav class="navbar navbar-default navbar-fixed-top">
                    <div class="container-fluid">
                        <div class="navbar-header">
                            <a href="#" class="navbar-brand" style="margin-left: 10px;">
                                理赔管理系统</a>
                            <button type="button" class="navbar-toggle"
                                    data-toggle="collapse" data-target="#navbar-collapse">
                                <span class="sr-only">切换导航</span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                            </button>
                        </div>
                        <!--不会随着窗口的大小让li标签内容下来  -->
                        <div class="collapse navbar-collapse" id="navbar-collapse">
                            <ul class="nav navbar-nav navbar-right " style="margin-top: 0;">
                                <!--<li class="">-->
                                <!--&lt;!&ndash;style="text-shadow: red 1px 1px 1px;"&ndash;&gt;-->
                                <!--<a href="#" class="btn btn-sm" ><span class="glyphicon glyphicon-user">李四</span></a>-->
                                <!--</li>-->
                                <li class="dropdown">
                                    <a href="#" class="dropdown-toggle" style="margin-right: 20px;" data-toggle="dropdown"><i class="fa fa-user"></i> <font th:text="${#authentication.name}" style="height:10px;bottom: -20px;"></font> <b class="caret"></b></a>
                                    <ul class="dropdown-menu " style="margin-right:20px;">
                                        <li>
                                            <a href="#" ><i class="fa fa-fw fa-gear"></i> 修改密码 </a>
                                        </li>
                                        <li class="divider"></li>
                                        <li>
                                            <a  >
                                                <form th:action="@{/logout}" method="post">
                                                    <input  type="submit" value="退出"></input>
                                                </form>
                                            </a>

                                        </li>
                                    </ul>
                                </li>
                            </ul>
                        </div>
                    </div>

                </nav>

                </div>

        </div>
        <!--中间区域，分为左右，右边是区域-->
        <div class="row" style="background-color: #c7ddef;margin-top: 1px;" id="middlePart">
            <!--左侧-->
            <div class="col-md-2 col-sm-2 col-xs-2" style="background-color: #c7ddef;">
                <div class="panel-group" >
                    <div class="panel panel-default">
                        <div id="header1" class="panel-heading" data-toggle="collapse" data-target="#sub1" data-parent="#panelContainer">
                            <i class="glyphicon glyphicon-list-alt"></i>
                            <a href="#">理赔</a>
                            <span class="glyphicon glyphicon-triangle-right pull-right"></span>
                        </div>
                        <div id="sub1" class="collapse panel-collapse">
                            <div class="panel-body">
                                <ul class="nav">
                                    <li>
                                        <a href="#" id="left_tree_1"><span></span>理赔中心</a>
                                    </li>
                                    <li>
                                        <a href="#" id="left_tree_2"><span></span>理赔案件</a>
                                    </li>
                                    <li>
                                        <a href="#" id="left_tree_3"><span></span>理赔sadas</a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!--右侧-->
            <div class="col-md-10 col-sm-10 col-sm-10 main_right">
                <div class="row" style="height: 100%;">
                    <div class="col-md-12 col-sm-12 col-xs-12">
                        <ul class="nav nav-tabs right_tab" style="margin-left:-13px;">
                            <li id="right_tab_li_0" class="active"><a class="active" id="right_tab_0" href="#right_tab_body_0" data-toggle="tab">首页</a></li>
                        </ul>
                    </div>
                    <div class="tab-content">
                        <div id="right_tab_body_0" class="tab-pane fade in active">
                            <!-- 内容展示页 -->
                            <div id="contentPanel">
                                <iframe id="iframe-page-content" src="claim-main" width="98%" height="92%"  frameborder="no" border="0" marginwidth="0"
                                        marginheight=" 0" scrolling="no" allowtransparency="yes"></iframe>
                            </div>
                        </div>
                    </div>
                </div>



            </div>

        </div>

    </div>

</body>
<script>
    $(document.body).css({
        "overflow-x":"hidden",
        "overflow-y":"auto"
    });
    function getiIframePageContentHeight(){
       return  $("#iframe-page-content").height();
    }
    //调整页面
    function resizeHtml(){
        var bodyHeigth=document.documentElement.clientHeight;
        var h=50/bodyHeigth*100;
        $("#topPart").height(h+"%");
        $("#middlePart").height((100-h)+"%");
        console.log(bodyHeigth+"body对象高度"+document.body.clientHeight);
    }
    window.onresize=function(){
        resizeHtml();
    };

    $(function() {
        resizeHtml();
        $(".panel-heading").on("click", function(e) {
            var idLength = e.currentTarget.id.length;
            var index = e.currentTarget.id.substr(idLength - 1, idLength);
            $("#sub" + index).on('hidden.bs.collapse', function() {
                $(e.currentTarget).find("span").removeClass("glyphicon glyphicon-triangle-bottom");
                $(e.currentTarget).find("span").addClass("glyphicon glyphicon-triangle-right");
            })
            $("#sub" + index).on('shown.bs.collapse', function() {
                $(e.currentTarget).find("span").removeClass("glyphicon glyphicon-triangle-right");
                $(e.currentTarget).find("span").addClass("glyphicon glyphicon-triangle-bottom");
            })
        })
        //点击左侧菜单栏显示在右边
        $(".panel-body > .nav > li > a").on("click", function(e) {
            var currentItemId=$(e.currentTarget).attr('id').replace(/[^0-9]/ig,"");
            var flag=false;
            $(".main_right ul li").each(function () {//导航选项添加移除之前的active
                if($(this).hasClass("active")){
                    $(this).removeClass();
                }
                var ind=$(this).attr('id').replace(/[^0-9]/ig,"");
                if(ind===currentItemId){
                    flag=true;
                    $(this).addClass("active");
                }
            });
            //添加不存在的tab
            if(!flag){
                var str="<li id='right_tab_li_"+currentItemId+"' class='active'><a  href=\"#right_tab_body_"+currentItemId+"\" data-toggle='tab' id='right_tab_"+currentItemId+"'><span>"+e.currentTarget.textContent+"</span><span class='glyphicon glyphicon-remove' style='margin-left: 5px' onclick='deleteTabs(this);'></span></a></li>"
                $(".main_right ul").append(str);
                var str2="<div id='right_tab_body_"+currentItemId+"' class=\"tab-pane fade\">\n";
                if(currentItemId=="1"){
                    str2+= "<div id='contentPanel'>" +
                    "                                <iframe id=\"iframe-page-content\" src=\"";
                    str2+="claim_center";
                    str2+="\" width='98%' height='100%'  frameborder='no' border='0' marginwidth='0'" +
                        "                                        marginheight=\" 0\" scrolling=\"no\" allowtransparency=\"yes\"></iframe>\n" +
                        "                            </div>"
                }else{
                    str2+= "<h3>菜单 "+currentItemId+"</h3>\n";
                }
                    "                        </div>";
                // location.href="#right_tab_body_"+currentItemId;
                $(".main_right .tab-content").append(str2);
            }
            $(".tab-content div").eq(0).removeClass("in active");
            $(".tab-content div").each(function () {
                if($(this).attr("id")!=$("#right_tab_"+currentItemId)){
                    if($(this).hasClass("in active")){
                        $(this).removeClass("in active")
                    }
                }
            });
            // $("#right_tab_"+currentItemId).tab('show');//添加选项时加载内容面板
            $(".tab-content #right_tab_body_"+currentItemId).addClass("in active");
        });


        $(".main_right a").on("click", function(e) {
            e.preventDefault();
            $(this).tab('show');
        })

    });
    function deleteTabs(val) {

        /* 如果删除了选中项就往前推一项，仅指添加时的位置前后，不是打开前后*/
        if($(val).parent().parent().hasClass("active")){
            $(val).parent().parent().prev().addClass("active");

            var aid=$(val).parent().parent().prev().children('a').attr('id').replace(/[^0-9]/ig,"");
            $(".tab-content").children("div").each(function(){
                var index=$(this).attr("id").replace(/[^0-9]/ig,"");
                if(index==aid){
                    $(this).addClass("active in");
                }
            })
        }
        /*移除tab相对应的内容区*/
         var liid=$(val).parent().parent().attr("id").replace(/[^0-9]/ig,"");
        $(".tab-content").children("div").each(function(){
            var index=$(this).attr('id').replace(/[^0-9]/ig,"");
            if(index==liid){
                $(this).remove();
            }
        });
        // 移除tab项
        $(val).parent().parent().remove();

    }
</script>



</html>